<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MD2Card - 将 Markdown 转化为精美卡片</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 卡片悬停效果 */
        .feature-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        /* 渐变文字效果 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* 玻璃态效果 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        /* 代码块样式 */
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 1.5rem;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        
        /* 数字标记样式 */
        .number-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            font-weight: 700;
            margin-right: 0.75rem;
        }
        
        /* 引用样式 */
        .quote-block {
            border-left: 4px solid #667eea;
            padding-left: 1.5rem;
            margin: 2rem 0;
            font-style: italic;
            color: #4a5568;
        }
        
        /* 滚动动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fade-in {
            animation: fadeInUp 0.8s ease-out;
        }
    </style>
</head>
<body>
    <!-- Hero 区域 -->
    <section class="relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-600"></div>
        <div class="absolute inset-0 bg-black opacity-10"></div>
        
        <div class="relative z-10 container mx-auto px-6 py-24">
            <div class="text-center text-white animate-fade-in">
                <h1 class="text-6xl font-bold mb-6">
                    MD2Card
                    <i class="fas fa-magic ml-4 text-yellow-300"></i>
                </h1>
                <p class="text-2xl mb-8 font-light">将 Markdown 文本瞬间转化为令人惊艳的视觉卡片</p>
                <div class="flex justify-center space-x-6 mb-12">
                    <a href="https://md2card.com/en" target="_blank" class="inline-flex items-center px-8 py-4 bg-white text-purple-600 rounded-full font-semibold hover:bg-gray-100 transition-all transform hover:scale-105">
                        <i class="fas fa-rocket mr-2"></i>
                        立即体验
                    </a>
                    <button class="inline-flex items-center px-8 py-4 bg-transparent border-2 border-white text-white rounded-full font-semibold hover:bg-white hover:text-purple-600 transition-all">
                        <i class="fas fa-play-circle mr-2"></i>
                        观看演示
                    </button>
                </div>
                
                <!-- 特性标签 -->
                <div class="flex flex-wrap justify-center gap-3">
                    <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-sm">
                        <i class="fas fa-brain mr-1"></i> AI 智能生成
                    </span>
                    <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-sm">
                        <i class="fas fa-palette mr-1"></i> 30+ 精美主题
                    </span>
                    <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-sm">
                        <i class="fas fa-eye mr-1"></i> 实时预览
                    </span>
                    <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-sm">
                        <i class="fas fa-download mr-1"></i> 多格式导出
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 装饰性波浪 -->
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="white"/>
            </svg>
        </div>
    </section>

    <!-- 主要内容区 -->
    <main class="bg-white">
        <!-- 产品展示 -->
        <section class="container mx-auto px-6 py-16">
            <div class="glass-effect rounded-2xl p-8 shadow-xl">
                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1755408276279-7c242f9c-b31a-4c90-a57e-2fc0ac525121.png" 
                     alt="MD2Card 界面展示" 
                     class="w-full rounded-lg shadow-lg">
            </div>
        </section>

        <!-- 解决的问题 -->
        <section class="container mx-auto px-6 py-16">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-4xl font-bold mb-8 text-center gradient-text">
                    <i class="fas fa-lightbulb mr-3"></i>它能解决什么问题
                </h2>
                
                <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-8">
                    <p class="text-lg leading-relaxed text-gray-700 drop-cap">
                        创建吸引人的视觉内容通常需要耗费大量时间和设计技能。许多用户在使用 Markdown 编写笔记或文档时，面临以下痛点：将文本转化为适合社交媒体或演示的视觉格式需要额外的设计工具和专业知识；手动调整排版和样式耗时且难以保持一致性；现有工具可能不支持复杂的 Markdown 语法或缺乏多样化的主题选择，导致输出内容单调或不专业。
                    </p>
                    
                    <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="bg-white rounded-xl p-6 shadow-md">
                            <i class="fas fa-clock text-3xl text-purple-600 mb-4"></i>
                            <h4 class="font-semibold mb-2">节省时间</h4>
                            <p class="text-sm text-gray-600">自动化转换流程，无需手动设计</p>
                        </div>
                        <div class="bg-white rounded-xl p-6 shadow-md">
                            <i class="fas fa-paint-brush text-3xl text-indigo-600 mb-4"></i>
                            <h4 class="font-semibold mb-2">专业美观</h4>
                            <p class="text-sm text-gray-600">多样化主题，确保视觉效果出众</p>
                        </div>
                        <div class="bg-white rounded-xl p-6 shadow-md">
                            <i class="fas fa-code text-3xl text-blue-600 mb-4"></i>
                            <h4 class="font-semibold mb-2">功能完整</h4>
                            <p class="text-sm text-gray-600">支持复杂 Markdown 语法和公式</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 核心功能 -->
        <section class="bg-gray-50 py-16">
            <div class="container mx-auto px-6">
                <h2 class="text-4xl font-bold mb-12 text-center gradient-text">
                    <i class="fas fa-star mr-3"></i>核心功能概述
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
                    <!-- 功能卡片 1 -->
                    <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                        <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-robot text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">AI 智能生成</h3>
                        <p class="text-gray-600">输入主题或长文本，AI 自动提取关键信息并生成结构化的卡片，简化创作过程。</p>
                    </div>
                    
                    <!-- 功能卡片 2 -->
                    <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                        <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-eye text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">实时预览</h3>
                        <p class="text-gray-600">支持边编辑边预览，实时查看卡片效果，确保输出符合预期。</p>
                    </div>
                    
                    <!-- 功能卡片 3 -->
                    <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-palette text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">多主题支持</h3>
                        <p class="text-gray-600">提供 30+ 专业主题（如商务、艺术、科技），满足不同场景的风格需求。</p>
                    </div>
                    
                    <!-- 功能卡片 4 -->
                    <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                        <div class="w-16 h-16 bg-gradient-to-br from-pink-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-code text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">丰富 Markdown 语法</h3>
                        <p class="text-gray-600">支持标题、列表、代码块、表格、LaTeX 数学公式等，保留 Markdown 的完整功能。</p>
                    </div>
                    
                    <!-- 功能卡片 5 -->
                    <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                        <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-download text-white text-2xl"></i>
                        </div>
                